<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-07-15 15:14:10
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-07-16 11:10:04
 * @FilePath: \router\src\views\admin\user.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<script lang="ts" setup>
import { ref } from 'vue';
import Menu from './admin/menu.vue';
import Navbar from './admin/navbar.vue';
import HistoryLink from './admin/historyLink.vue';


interface IMenuItem {
    title: string;
    icon?: string;
    active?: boolean;
}


interface IMenu extends IMenuItem {
    children: IMenuItem[];
   
}

const menus = ref<IMenu[]>([
  {
    title: '错误页面',
    icon: 'icon-a-094_beizhu',
    active: true,
    children: [
      {
        title: '404页面',
        active: true,
      },
      {
        title: '403页面',
       
      },
      {
        title: '500页面',
      }
    ] as IMenuItem[]
  },
  {
    title: '编辑器',
    icon: 'icon-a-094_beizhu',
    children: [
      {
        title: '富文本编辑器',
      },
      {
        title: 'markdown编辑器',
       
      },
      {
        title: '500页面',
      }
    ] as IMenuItem[]
  }
]) 


// 菜单切换
const handlerMenu = (munu: IMenu ,itemMenu?: IMenuItem) => {
  resetMenu()
  munu.active = !munu.active;
}

// 菜单重置
const resetMenu = () => {
  menus.value.forEach(item => {
    item.active = false;
    item.children.forEach(itemMenu => {
      itemMenu.active = false;
    });
  });
}

</script>

<template>
  <div class="home-container ">
      <Menu  class="hidden md:block"/>
    <div class="home-content">
      <Navbar />
      <HistoryLink />
      <div class=" m-5  ">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .home-container{
    @apply w-screen  flex ;
min-height: 100vh;
    .mean{
      @apply w-[200px] bg-gray-800 p-4

   
    }

    .mean-img{
        @apply   flex text-white text-sm ;

        .logo{
          @apply w-[40px] h-[40px] rounded-full overflow-hidden;
        }
      }

    .home-content{
      @apply w-full h-full bg-gray-100 flex-1 ;
      min-height: 100vh;
    }
  }
  
  .left-container{

    dl{
      @apply text-gray-300 text-sm;

      dt{
         @apply text-sm mt-6 flex items-center justify-between cursor-pointer;
      }

      .title-container{
        @apply flex items-center justify-center;
      }
    }

    dd{
      @apply py-3 pl-4 my-2 text-white rounded-md cursor-pointer hover:bg-violet-500;
      &.active  {
       @apply bg-violet-700  ;
      }
    }
  }


  .beizhu{
    font-size: 22px;
  }
</style>

<script lang="ts">
// export default {
//   route: { path: "home" },
// };
</script>
